<template>
  <!-- 新建绩效考核 -->
  <div class="Performance-appraisal">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中间内容 -->
    <div class="content">
      <van-form>
        <van-collapse v-model="activeNames" accordion>
          <van-collapse-item name="1">
            <template #title>
              <van-tag style="margin-right:0.2rem" type="primary" color="burlywood">1</van-tag>
              <span>工作任务</span>
              <span style="margin-left:2rem" v-if="power">自评分值：{{perData.workTask_self}}</span>
            </template>
            <van-cell v-for="item in workTask" :key="item.typeId" :label="'分值：'+item.score">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">{{item.typeId}}
                </van-tag>
                <span>{{item.name}}</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model.number="addList.workTask_self" type="digit" label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.workTask_superior" type="digit" label="领导分值：" />
          </van-collapse-item>
          <van-collapse-item name="2">
            <template #title>
              <van-tag style="margin-right:0.2rem" type="primary" color="burlywood">2</van-tag>
              <span>工作质量</span>
              <span style="margin-left:2rem" v-if="power">自评分值：{{perData.workQuality_self}}</span>
            </template>
            <van-cell v-for="item in workQuality" :key="item.typeId" :title="item.name" :label="'分值：'+item.score">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">{{item.typeId}}
                </van-tag>
                <span>{{item.name}}</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model="addList.workQuality_self" type="digit" label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.workQuality_superior" type="digit" label="领导分值：" />
          </van-collapse-item>
          <van-collapse-item name="3">
            <template #title>
              <van-tag style="margin-right:0.2rem" type="primary" color="burlywood">3</van-tag>
              <span>工作技能</span>
              <span style="margin-left:2rem" v-if="power">自评分值：{{perData.jobSkill_self}}</span>
            </template>
            <van-cell v-for="item in workSkill" :key="item.typeId" :title="item.name" :label="'分值：'+item.score">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">{{item.typeId}}
                </van-tag>
                <span>{{item.name}}</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model.number="addList.jobSkill_self" type="digit" label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.jobSkill_superior" type="digit" label="领导分值：" />
          </van-collapse-item>
          <van-collapse-item name="4">
            <template #title>
              <van-tag style="margin-right:0.2rem" type="primary" color="burlywood">4</van-tag>
              <span>工作态度与责任感</span>
              <span style="margin-left:0.5rem" v-if="power">自评分值：{{perData.workAttitude_self}}</span>
            </template>
            <van-cell v-for="item in workAttitude" :key="item.typeId" :title="item.name" :label="'分值：'+item.score">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">{{item.typeId}}
                </van-tag>
                <span>{{item.name}}</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model.number="addList.workAttitude_self" type="digit" label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.workAttitude_superior" type="digit"
              label="领导分值：" />
          </van-collapse-item>
          <van-collapse-item name="5">
            <template #title>
              <van-tag style="margin-right:0.2rem" type="primary" color="burlywood">5</van-tag>
              <span>协调性</span>
              <span style="margin-left:2.3rem" v-if="power">自评分值：{{perData.harmony_self}}</span>
            </template>
            <van-cell v-for="item in harmony" :key="item.typeId" :title="item.name" :label="'分值：'+item.score">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">{{item.typeId}}
                </van-tag>
                <span>{{item.name}}</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model.number="addList.harmony_self" type="digit" label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.harmony_superior" type="digit" label="领导分值：" />
          </van-collapse-item>
          <van-collapse-item name="6">
            <template #title>
              <van-tag style="margin-right:0.2rem" type="primary" color="burlywood">6</van-tag>
              <span>纪律性</span>
              <span style="margin-left:2.3rem" v-if="power">自评分值：{{perData.senseOfDiscipline_self}}</span>
            </template>
            <van-cell v-for="item in discipline" :key="item.typeId" :title="item.name" :label="'分值：'+item.score">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">{{item.typeId}}
                </van-tag>
                <span>{{item.name}}</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model.number="addList.senseOfDiscipline_self" type="digit"
              label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.senseOfDiscipline_superior" type="digit"
              label="领导分值：" />
          </van-collapse-item>
          <van-collapse-item name="7">
            <template #title>
              <van-tag style="margin-right:0.2rem" type="primary" color="burlywood">7</van-tag>
              <span>减分项</span>
              <span style="margin-left:2.3rem" v-if="power">自评分值：{{perData.deduction_self}}</span>
            </template>
            <van-cell v-for="item in deduction" :key="item.typeId" :title="item.name" :label="'分值：'+item.score">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">{{item.typeId}}
                </van-tag>
                <span>{{item.name}}</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model.number="addList.deduction_self" type="digit" label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.deduction_superior" type="digit" label="领导分值：" />
          </van-collapse-item>
          <van-collapse-item name="8">
            <template #title>
              <van-tag style="margin-right:0.2rem" type="primary" color="burlywood">8</van-tag>
              <span>加分项</span>
              <span style="margin-left:2rem"
                v-if="power">自评分值：{{perData.awardedMarks_self}}(参与){{perData.awardedMarksTwo_self}}（月度）</span>
            </template>
            <van-cell label="分值：2*N">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">1
                </van-tag>
                <span>参与公司重大项目加分</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model.number="addList.awardedMarks_self" type="digit" label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.awardedMarks_superior" type="digit"
              label="领导分值：" />
            <van-cell label="分值：2">
              <template #title>
                <van-tag plain round style="margin-right:0.2rem" type="primary" color="burlywood">2
                </van-tag>
                <span>月度服务次数第一名</span>
              </template>
            </van-cell>
            <van-field required v-if="!power" v-model.number="addList.awardedMarksTwo_self" type="digit"
              label="自评分值：" />
            <van-field required v-if="power" v-model.number="perData.awardedMarksTwo_superior" type="digit"
              label="领导分值：" />
          </van-collapse-item>
        </van-collapse>
        <van-field v-if="!power" readonly clickable :value="addList.assess_date" label="考核日期" placeholder="点击选择日期"
          @click="showCalendar = true" />
        <van-field v-if="!power" v-model="addList.remark" rows="1" autosize label="备注" type="textarea"
          placeholder="请输入备注" />
      </van-form>
    </div>
    <div class="edit-btn">
      <van-button block size="small" type="info" color="burlywood" @click="onReset()">重置</van-button>
      <van-button block size="small" type="info" color="burlywood" @click="onSubmit()">提交</van-button>
      <van-button v-if="power" block size="small" type="info" color="burlywood" @click="onSubmit()">认可自评</van-button>
    </div>
    <!-- 年月选择器 -->
    <van-popup v-model="showCalendar" position="bottom">
      <van-datetime-picker title="选择年月" type="year-month" :formatter="formatter"
        @confirm="monthOnConfirm" @cancel="showCalendar = false" />
    </van-popup>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { AddAssessForm, AssessFormApproval } from '@/request/api'
import dayjs from 'dayjs'

export default {
  name: 'PerformanceAppraisal',
  components: {
    TopHeader
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      power: sessionStorage.getItem('power'), // 用户权限
      activeNames: ['1'],
      showCalendar: false, // 日期选择器显示状态
      // minDate: new Date(2016, 0, 1),
      perData: {},
      addList: {
        staff_Duty: 0,
        staff_DutyName: '测试',
        assess_date: '',
        staff_Id: sessionStorage.getItem('userId'), // 用户id
        staff_Name: sessionStorage.getItem('userName'), // 用户名字
        workTask_self: '', // 工作任务
        workTask_superior: '',
        workQuality_self: '', // 工作质量
        workQuality_superior: '',
        jobSkill_self: '', // 工作技能
        jobSkill_superior: '',
        workAttitude_self: '', // 工作态度与责任感
        workAttitude_superior: '',
        harmony_self: '', // 协调性
        harmony_superior: '',
        senseOfDiscipline_self: '', // 纪律性
        senseOfDiscipline_superior: '',
        deduction_self: '', // 减分项
        deduction_superior: '',
        awardedMarks_self: '', // 加分项
        awardedMarks_superior: '',
        remark: ''
      },
      workTask: [
        {
          name: '能时时跟进、主动追踪工作，提前完成任务',
          typeId: '1',
          score: '30'
        },
        {
          name: '能跟踪，按时完成任务',
          typeId: '2',
          score: '25-29'
        },
        {
          name: '在监督下完成任务',
          typeId: '3',
          score: '15-25'
        },
        {
          name: '在指导下，偶尔完成任务',
          typeId: '4',
          score: '15-0'
        }
      ],
      workQuality: [
        {
          name: '出色、准确，无任何差错',
          typeId: '1',
          score: '20'
        },
        {
          name: '完成任务质量尚好，但还可以加强',
          typeId: '2',
          score: '15-19'
        },
        {
          name: '工作疏忽，偶有小差错',
          typeId: '3',
          score: '10-14'
        },
        {
          name: '工作质量不佳，常有差错',
          typeId: '4',
          score: '10-0'
        }
      ],
      workSkill: [
        {
          name: '具有极丰富的专业技能，能充分完成本身职责',
          typeId: '1',
          score: '10'
        },
        {
          name: '有相当的专业技能，能够完成本职工作',
          typeId: '2',
          score: '8-9'
        },
        {
          name: '专业技术一般，但对完成任务尚无障碍',
          typeId: '3',
          score: '7'
        },
        {
          name: '技能程序稍感不足，执行任务常请教他人',
          typeId: '4',
          score: '5-6'
        },
        {
          name: '对工作必须技能不熟悉，日常工作难以完成',
          typeId: '5',
          score: '4-0'
        }
      ],
      workAttitude: [
        {
          name: '任劳任怨，主动，竭尽所能完成任务',
          typeId: '1',
          score: '15'
        },
        {
          name: '工作努力，主动，能较好完成份内工作',
          typeId: '2',
          score: '13-14'
        },
        {
          name: '有责任心，能自动自发',
          typeId: '3',
          score: '10-12'
        },
        {
          name: '交付工作需要督促方能完成',
          typeId: '4',
          score: '7-9'
        },
        {
          name: '敷衍了事，无责任心，做事粗心大意',
          typeId: '5',
          score: '6-0'
        }
      ],
      harmony: [
        {
          name: '与人协调无间，为工作顺利完成尽最大努力',
          typeId: '1',
          score: '15'
        },
        {
          name: '爱护团体，常协助别人',
          typeId: '2',
          score: '13-14'
        },
        {
          name: '肯应他人要求帮助别人',
          typeId: '3',
          score: '10-12'
        },
        {
          name: '公在必要与人协调的工作上与合作',
          typeId: '4',
          score: '7-9'
        },
        {
          name: '精神散漫，不肯与别人合作',
          typeId: '5',
          score: '6-0'
        }
      ],
      discipline: [
        {
          name: '自觉遵守和维护部门各项规章制度',
          typeId: '1',
          score: '10'
        },
        {
          name: '能遵守和维护部门各项规章制度',
          typeId: '2',
          score: '7-9'
        },
        {
          name: '不能遵守，声音大吵大闹，影响他人工作',
          typeId: '3',
          score: '6-0'
        }
      ],
      deduction: [
        {
          name: '日志漏一次扣两分',
          typeId: '1',
          score: '-2*N'
        }
      ],
      add: [
        {
          name: '参与公司重大项目加分',
          typeId: '1',
          score: '2*N'
        },
        {
          name: '月度服务次数第一名',
          typeId: '2',
          score: '2'
        }
      ]
    }
  },
  created () {
    this.perData = JSON.parse(sessionStorage.getItem('PERFORMANCE_LIST'))
    this.assign()
  },
  methods: {
    assign () {
      if (this.power === '部门审核人') {
        this.perData.workTask_superior = this.perData.workTask_self
        this.perData.workQuality_superior = this.perData.workQuality_self
        this.perData.jobSkill_superior = this.perData.jobSkill_self
        this.perData.workAttitude_superior = this.perData.workAttitude_self
        this.perData.harmony_superior = this.perData.harmony_self
        this.perData.senseOfDiscipline_superior = this.perData.senseOfDiscipline_self
        this.perData.deduction_superior = this.perData.deduction_self
        this.perData.awardedMarks_superior = this.perData.awardedMarks_self
        this.perData.awardedMarksTwo_superior = this.perData.awardedMarksTwo_self
      }
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    // 日期选择器
    monthOnConfirm (val) {
      console.log(val)
      this.showCalendar = false
      this.addList.assess_date = dayjs(val).format('YYYY-MM')
    },
    // 点击提交
    onSubmit () {
      if (this.power === '部门审核人') {
        if (
          this.perData.workTask_superior !== '' &&
          this.perData.workQuality_superior !== '' &&
          this.perData.jobSkill_superior !== '' &&
          this.perData.workAttitude_superior !== '' &&
          this.perData.harmony_superior !== '' &&
          this.perData.senseOfDiscipline_superior !== '' &&
          this.perData.deduction_superior !== '' &&
          this.perData.awardedMarks_superior !== '' &&
          this.perData.awardedMarksTwo_superior !== ''
        ) {
          this.$dialog.confirm({
            title: '提示',
            message: '您确定要提交吗?',
            confirmButtonColor: 'burlywood'
          }).then(() => {
            const param = this.perData
            console.log(param)
            AssessFormApproval(param).then(res => {
              console.log(res)
              if (res.Tag === 1) {
                this.addList = this.$options.data().addList
                this.$toast.success('已提交')
                this.$router.back(-1)
              } else {
                this.$dialog.alert({
                  title: '提交失败',
                  message: '考核表不能重复提交'
                }).then(() => {
                  this.addList = this.$options.data().addList
                })
              }
            })
          })
        } else {
          this.$dialog.alert({
            message: '工作任务、工作质量、工作技能、工作态度与责任感、协调性、纪律性、减分项、加分项必填',
            confirmButtonColor: 'burlywood'
          })
        }
      } else {
        if (
          this.addList.workTask_self !== '' &&
          this.addList.workQuality_self !== '' &&
          this.addList.jobSkill_self !== '' &&
          this.addList.workAttitude_self !== '' &&
          this.addList.harmony_self !== '' &&
          this.addList.senseOfDiscipline_self !== '' &&
          this.addList.deduction_self !== '' &&
          this.addList.awardedMarks_self !== '' &&
          this.addList.awardedMarksTwo_self !== ''
        ) {
          if (this.addList.assess_date === '') {
            this.$dialog.alert({
              message: '考核时间必填',
              confirmButtonColor: 'burlywood'
            })
          } else {
            const param = this.addList
            console.log(param)
            AddAssessForm(param).then(res => {
              console.log(res)
              console.log(res)
              if (res.Tag === 1) {
                this.addList = this.$options.data().addList
                this.$toast.success('已提交')
                this.$router.back(-1)
              } else {
                this.$dialog.alert({
                  title: '提交失败',
                  message: '考核表不能重复提交，请重新选择考核日期',
                  confirmButtonColor: 'burlywood'
                }).then(() => {
                  // this.addList = this.$options.data().addList
                  this.addList.assess_date = ''
                })
              }
            })
          }
        } else {
          this.$dialog.alert({
            message: '工作任务、工作质量、工作技能、工作态度与责任感、协调性、纪律性、减分项、加分项必填',
            confirmButtonColor: 'burlywood'
          })
        }
      }
    },
    // 点击重置
    onReset () {
      console.log('点击重置')
      console.log(this.addList)
      this.addList = this.$options.data().addList
      this.$toast.success('已重置')
    }
  }
}
</script>

<style lang="less" scoped>
.Performance-appraisal {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
    .van-form {
      box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
    }
  }
  .edit-btn {
    width: 100%;
    height: 1.4rem;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
    box-shadow: 0 -3px 4px 2px rgb(240, 240, 240);
    .van-button {
      width: 30%;
    }
  }
}
</style>
